<div class="grid50"><div class="rad">
  <table class="grids" id="program-ho">
    <thead>
      <tr>
        <th width="24px"><input type="checkbox"></th>
        <th>Program Head Office</th>
        <!-- <th>Action</th> -->
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div></div>


<div class="grid50"><div class="rad">
  <table class="grids" id="program-cluster">
    <thead>
      <tr>
        <th width="24px"><input type="checkbox" ></th>
        <th>Program Cluster</th>
        <!-- <th>Action</th> -->
      </tr>
    </thead>
    <tbody>

    </tbody>

    <tfoot>
      <tr>
        <td colspan="2"><a class="link-table-1 cluster" >Add New Cluster's Program</a></td>
      </tr>
    </tfoot>
  </table>
</div></div>

<div class="clear"></div>

<div id="dialog-add-program" title="Buat/Update Program">

    <table>
      <tr>
        <td>Nama Program</td>
        <td><input name="program_name" id="caption" /></td>
      </tr>
      <tr>
        <td>Keterangan</td>
        <td><textarea name="program_description" id="description"></textarea></td>
      </tr>
      <tr>
        <td>Aktif</td>
        <td><!-- <input name="program-expire" /> --><input type="checkbox" name="active" id="status"></td>
      </tr>
    </table>

</div>

<?php // echo preg_replace( '/\s[\s]+/', '-',  json_encode($program)); ?>

<script type="text/javascript">
  var programs = jQuery.parseJSON('<?php echo trim(json_encode($program), "\r\n"); ?>');
  var active_programs = jQuery.parseJSON('<?php echo json_encode($outlet_programs)?>');
  var x=0;
  $(document).ready(function(){
    $.each(programs, function(key, value) {
      // alert("yaddi");
      // $("#program-cluster").next().text(key);
      prog =  "<tr>"+
          "<td><input type='checkbox' name='program_id[]' id='program_"+value['program_id']+"' value='"+value['program_id']+"'></td>"+
          "<td><label for='program_"+value['program_id']+"'>"+value['caption']+"</label> </td>"+
          // "<td>"+value['description']+"</td>"+
          "</tr>";
      if(value["territory_id"] == 1) {
        $("#program-ho tbody").append(prog);
      }
      else {
        $("#program-cluster tbody").append(prog);
      }
    });

    $.each(active_programs, function(key, val) {
      $("#program_"+val['program_id']).attr('checked', 'checked');
    });

    $('.cluster').click(function(){
      $( "#dialog-add-program" ).dialog("open");
    });

      // var active = $('#statused').val();
    $( "#dialog-add-program" ).dialog({ 
      autoOpen: false, modal: true,
      buttons: {
        "Simpan": function() {
          var program_name = $('#caption').val();
          var program_description = $('textarea#description').val();
          $.ajax({
            type: "POST",
            url: '<?=base_url()?>index.php/master/addProgram/1',
            data: {caption:program_name , description:program_description},
            success: function(data){
              appendNewProgram(data, program_name);
              $( "#dialog-add-program" ).dialog( "close" );
            }
          });

        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  }); // end of document ready function

  function appendNewProgram (id_program, caption) {
    new_prog =  "<tr>"+
        "<td><input type='checkbox' name='program_id[]' id='program_"+id_program+"' value='"+id_program+"'></td>"+
        "<td><label for='program_"+id_program+"'>"+caption+"</label> </td>"+
        // "<td>"+value['description']+"</td>"+
        "</tr>";
    $("#program-cluster tbody").append(new_prog);
  }
</script>